<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Internationalisation page for the jquery ui timepicker</title>

    <script src="../include/jquery-1.5.1.min.js"></script>
    <script src="../include/jquery.ui.core.min.js"></script>
    <script src="../include/jquery.ui.widget.min.js"></script>
    <script src="../jquery.ui.timepicker.js"></script>
    
    <link rel="stylesheet" href="../include/jquery-ui-1.8.14.custom.css" />
    <link rel="stylesheet" href="../jquery.ui.timepicker.css" />
    <style>
        #timepicker { font-size: 10px }
    </style>

    <script src='jquery.ui.timepicker-de.js'></script>
    <script src='jquery.ui.timepicker-fr.js'></script>
    <script src='jquery.ui.timepicker-ja.js'></script>
</head>
<body>

    <script type="text/javascript">
        $(document).ready(function() {

            $.timepicker.setDefaults( $.timepicker.regional[ "" ] );

            $('#timepicker').timepicker({
                showCloseButton: true,
                showNowButton: true,
                showDeselectButton: true
            });

            $('#locale').change(function() {
                $('#timepicker').timepicker( "option",
                				$.timepicker.regional[ $( this ).val() ] );
            });
        });
    </script>

    Select a localisation :
    <select id='locale'>
        <option value='fr'>Fran&ccedil;ais</option>
        <option value='de'>Deutsch</option>
        <option value='ja'>Japanese</option>
    </select>

    <br>

    <div id="timepicker">

    </div>

    <br>

    List of localisations : 
<ul>
    <li>
        <a href="jquery.ui.timepicker-de.js">Deutsch (jquery.ui.timepicker-de.js</a>
    </li>
    
    <li>
        <a href="jquery.ui.timepicker-fr.js">Fran&ccedil;ais (jquery.ui.timepicker-fr.js</a>
    </li>

    <li>
        <a href="jquery.ui.timepicker-ja.js">Japanese (jquery.ui.timepicker-ja.js</a>
    </li>

</ul>

</body>